<template>
  <!-- 配菜组件 -->
  <div class="side-dishes">
    <!-- 总内容 -->
    <div class="foods-wrapper">
      <!-- 菜品图片 -->
      <div class="food-box">
        <div class="img-wrapper" @click="$emit('close')">
          <img src="../../../static/imgs/close.png">
        </div>
      </div>
      <!-- 配菜标题 -->
      <div class="spec-box" v-for="(option, optionIndex) in food.goods_spec" :key="option.id">
        <div class="spec-title">{{option.title}}</div>
        <!-- 配菜选项 -->
        <ul class="spec-wrapper">
          <li :class="{'current': selected[optionIndex] && selected[optionIndex].id === item.id}"
              v-for="item in option.goods_spec_item" :key="item.id"
              @click="selectSpec(item, optionIndex)">
            <div class="img-wrapper">
              <img v-if="selected[optionIndex] && selected[optionIndex].id === item.id" src="../../../static/imgs/checked.png">
              <img v-else src="../../../static/imgs/check.png">
            </div>
            <div class="content">
              <div class="title">{{item.title}}</div>
              <div>+ {{currencyDefault}} {{item.add_price}}</div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 确定按钮 -->
      <div class="spec-btn" @click="confirmSpec">OK</div>
    </div>
    <div class="prompt" @click="$emit('close')"></div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: 'specifications',
    data() {
      return {
        selected: []
      }
    },
    props: {
      currencyDefault: {
        type: String
      },
      food: {
        type: Object
      }
    },
    created() {
      let lan = localStorage.getItem("lan");
      if(lan){
        this.$i18n.locale = lan
      }
      //  默认选择
      this.selected = this.food.goods_spec.map(item => item.goods_spec_item[0])
    },
    methods: {
      //  选择
      selectSpec(item, index) {
        this.selected.splice(index, 1, item)
      },
      //  确定
      confirmSpec() {
        const options = this.selected.map(item => item.title)
        this.$emit('add',JSON.parse(JSON.stringify(this.food)), options, this.comboPrice)
      }
    },
    computed: {
      ...mapState([
        'cartFoods'
      ]),
      //  已选
      selectedOptions() {
        if (this.selected.length > 0) {
          return this.selected.map(item => item.title).join(' / ')
        } else {
          return ''
        }
      },
      comboPrice() {
        let sum = +this.food.cost
        this.selected.forEach(item => {
          sum += +item.add_price
        })
        return sum.toFixed(2)
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "../../../static/css/mixin";
  .side-dishes{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 500;
    width: 100%;
    height: 100%;
    background: white;
    .foods-wrapper{
      width: 100%;
      height: 100%;
      background: #F2F9EF;
      overflow: auto;
      .food-box {
        display: flex;
        justify-content: flex-end;
        padding: 10px 20px 0;
        .img-wrapper {
          width: .32rem;
          height: .32rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .icon{
          background-repeat: no-repeat
        }
        .content{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 5px 10px;
          flex: 1;
          .name{
            font-size: 18px;
            color: rgb(7,17,27)
          }
          .price{
            font-weight: 700;
            line-height: 24px;
            .now{
              margin-right: 8px;
              font-size: 18px;
              color: rgb(240,20,20)
            }
          }
        }
      }
      .spec-box {
        padding: 10px;
        .spec-title{
          padding-left: 14px;
          padding-bottom: 5px;
          @include fscfw(.36rem)
        }
        .spec-wrapper{
          width: 100%;
          display: flex;
          flex-direction: column;
          li{
            display: flex;
            align-items: center;
            height: 35px;
            line-height: 35px;
            padding: 0 14px;
            border-radius: 3px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.current{

            }
            .img-wrapper{
              height: 20px;
              width: 20px;
              line-height: 20px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .content {
              flex: 1;
              width: 0;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .title {
                padding-left: 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
      .spec-btn{
        text-align: center;
        margin: 20px auto;
        width: 343px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        background-color: $tc;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        color: white;
      }
    }
    .prompt {
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: 0.5;
      z-index: -30;
    }
  }
</style>
